<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>众筹</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>

    </style>
</head>

<body>

    <!--正文-->
    <div class="All-the-chips bc-gray">
        <div class="hd flex">
            <span class="active">综合推荐</span>
            <!-- <span @click='click_type()'>全部类别</span> -->
            <span>全部类别</span>
        </div>
        <div class="td">
            <div class="td1">
                <ul>
                    <li :class="{active:$index==0}" v-for='item in num' @click='save_argument_1(this)'>
                        {{item.t1}}
                    </li>
                    <li @click='save_argument_3(this)'>
                        即将开始
                    </li>
                  
                </ul>
            </div>
            <div class="td2">
                <ul class="clearfix">
                    <li class="active">全部类别</li>
                    <li v-for='item in type' @click='save_argument_2(this)'>{{item.firstTypeDiscribe}}</li>
                </ul>
            </div>
        </div>
        <div class="bd">
            <div class="bd1" v-if='see'>
                <ul>
                    <li class="clearfix" v-for='item in Default_data' @click='go_info(this)'>
                        <img :src="item.produceHeadImages" alt="">
                        <div class="right">
                            <h5>{{item.produceDiscribe}}</h5>
                            <p>￥
                                <font>{{item.minimumMoney}}</font><span>起</span></p>
                            <p class="rage">
                                <progress id="myProgress" value="75" max="100"></progress><span>75%</span>
                            </p>
                            <p>
                                <span>{{item.supportNum}}人</span>
                                <em style="margin-right:.3rem">{{item.target_amount}}万元</em>
                                <i>{{item.surplusTime}}天</i>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="bd1" v-else>
                <ul>
                    <li class="clearfix" v-for="item in Default_data">
                        <img :src="item." alt="">
                        <div class="right">
                            <h5>内容内容内容内容内容内容</h5>
                            <p>￥4000<span>起</span></p>
                            <p class="rage" style="display:none;">
                                <progress id="myProgress" value="75" max="100"></progress><span>75%</span>
                            </p>
                            <p style="display:none;">
                                <span>1544人</span>
                                <em>31.08万元</em>
                                <i>26天</i>
                            </p>
                            <div><span>16小时</span>后开始</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

    </div>


    <!--灰色浮层-->
    <div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;top:.84rem;"></div>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>

    <script>
        $(function () {
            // 点击综合推荐
            $('.hd span').click(function () {
                $(this).toggleClass('active').siblings().removeClass('active');
                $('.mask').fadeToggle();
                var idx = $(this).index();
                $('.td>div').eq(idx).toggleClass('active').siblings().removeClass('active');

                $(this).toggleClass('arrow-top')

            })



        })
    </script>

    <script>
        $(function () {
            new Vue({
                el: 'body',
                data: {
                    argument_1: '',
                    argument_2: '',
                    Default_data: [],
                    type: [],
                    num: [{
                        t1: '综合推荐',
                        t2: 0
                    }, {
                        t1: '最新上线',
                        t2: 1
                    }, {
                        t1: '金额最多',
                        t2: 2
                    }, {
                        t1: '支持最多',
                        t2: 3
                    }, {
                        t1: '即将结束',
                        t2: 4
                    }],
                    see: true

                },
                ready: function () {
                    this.$http.get(base_url + 'ZITAOHUI/recommend', {
                        params: {
                            first: 0,
                            second: 0
                        }
                    }).then(
                        function (response) {
                            console.log(response)
                         
                            let Default_data = response.data.extend.list;
                            console.info(Default_data);
          
                            let length = Default_data.length;
                            for (let i = 0; i < length; i++) {
                                console.log(i)
                           
                                Default_data[i].surplusTime = Default_data[i].surplusTime /
                                    86400;
                                Default_data[i].surplusTime = Math.ceil(Default_data[i].surplusTime)

                                console.log(Default_data[i].surplusTime)
                            }
      
                            this.$set('Default_data', Default_data)
                        },
                        function () {

                        })
                    this.$http.get(base_url + 'ZITAOHUI/crowdFundingType').then(
                        function (response) {
                            console.log(response)
                            let all_data = response.data.extend.list;
                            console.log(all_data)

                            this.$set('type', all_data)
                        },
                        function () {

                        })

                    setTimeout(function () {
                        $('.td1 ul li').click(function () {
                            $(this).addClass('active').siblings().removeClass(
                                'active');
                            $('.mask').hide();
                            $('.td>div').removeClass('active');
                            $(this).parent('.All-the-chips').find('.hd span:eq(0)')
                                .removeClass('arrow-top')
                        })
                        $('.td2 ul li').click(function () {
                            $(this).addClass('active').siblings().removeClass(
                                'active');
                            $('.mask').hide();
                            $('.td>div:eq(1)').removeClass('active');
                        })
                    }, 80);
                },
                methods: {
                 
                    save_argument_1: function (t) {
                        console.log(t)
                        this.$set('argument_1', t.item.t2)
                        this.transfer(this.argument_1, this.argument_2)
                    },
                    
                    save_argument_2: function (t) {
                        this.$set('argument_2', t.item.firstTypeId)
                        console.log(this.argument_2)
                        this.transfer(this.argument_1, this.argument_2)
                    },
                   
                    save_argument_3: function (t) {
                        console.log(t)
                      
                        this.transfer(5, this.argument_2)
                        this.see = false;
                    },
                    transfer: function (ar1, ar2) {
                        if (ar1 == '') {
                            ar1 = 0
                        }
                        if (ar2 == '') {
                            ar2 = 0
                        }
                        this.$http.get(base_url + 'ZITAOHUI/recommend', {
                            params: {
                                first: ar1,
                                second: ar2
                            }
                        }).then(
                            function (response) {
                                console.log(response)
                                let Default_data = response.data.extend.list;

                                let length = Default_data.length;
                                for (let i = 0; i < length; i++) {
                                    Default_data[i].surplusTime = Default_data[i].surplusTime /
                                        86400;
                                    Default_data[i].surplusTime = Math.ceil(Default_data[i].surplusTime)
                                }

                                this.$set('Default_data', Default_data)
                                console.info(this.Default_data);
                            },
                            function () {

                            })
                    },
                  
                    go_info: function (t) {
                        console.log(t)
                        window.location.href = '../page/All-the-chips-info.html?cf_id='+t.item.id
                    }
                }
            })
        })
    </script>
</body>

</html>